<template>
  <div class="bar">
    <el-tooltip effect="dark" content="放大" placement="bottom" class="icon">
      <i
        class="el-icon-zoom-in"
        @click="changeEvent('zoomIn')"
        :class="[
          currentTopBarName == 'zoomIn' ? 'activeClass' : 'defaultClass',
        ]"
      ></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="缩小" placement="bottom">
      <i
        class="el-icon-zoom-out"
        @click="changeEvent('zoomOut')"
        :class="[
          currentTopBarName == 'zoomOut' ? 'activeClass' : 'defaultClass',
        ]"
      ></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="向右旋转" placement="bottom">
      <i
        class="el-icon-refresh-right"
        @click="changeEvent('rotateRight')"
        :class="[
          currentTopBarName == 'rotateRight' ? 'activeClass' : 'defaultClass',
        ]"
      ></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="向左旋转" placement="bottom">
      <i
        class="el-icon-refresh-left"
        @click="changeEvent('rotateLeft')"
        :class="[
          currentTopBarName == 'rotateLeft' ? 'activeClass' : 'defaultClass',
        ]"
      ></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="移动" placement="bottom">
      <i
        class="el-icon-rank"
        @click="changeEvent('move')"
        :class="[currentTopBarName == 'move' ? 'activeClass' : 'defaultClass']"
      ></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="全屏" placement="bottom">
      <i
        class="el-icon-full-screen"
        @click="changeEvent('fullScreen')"
        :class="[
          currentTopBarName == 'fullScreen' ? 'activeClass' : 'defaultClass',
        ]"
      ></i>
    </el-tooltip>
    <el-tooltip effect="dark" content="清空画布" placement="bottom">
      <i
        class="el-icon-delete"
        @click="changeEvent('clearAll')"
        :class="[
          currentTopBarName == 'clearAll' ? 'activeClass' : 'defaultClass',
        ]"
      ></i>
      <!-- <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" icon="el-icon-info" iconColor="red"
        @onConfirm="changeEvent('clearAll')" title="确定清空画布吗？">
        <i class="el-icon-delete" slot="reference"></i>
      </el-popconfirm> -->
    </el-tooltip>
    <el-tooltip effect="dark" content="设置" placement="bottom">
      <i
        class="el-icon-setting"
        @click="setting"
        :class="[
          currentTopBarName == 'setting' ? 'activeClass' : 'defaultClass',
        ]"
      ></i>
    </el-tooltip>
    <div class="text-container">
      <div class="text">对比度:</div>
      <el-slider
        v-model="contrast"
        :format-tooltip="formatTooltip"
        :debounce="20"
      ></el-slider>
    </div>
    <div class="text-container">
      <div class="text">亮度:</div>
      <el-slider
        v-model="brightness"
        :format-tooltip="formatTooltip"
        :debounce="20"
      ></el-slider>
    </div>

    <div class="text-container">
      <div class="annation-color">
        <div>
          <div class="text">专病:</div>
          <el-select
            v-model="filterDiseaseIds"
            size="mini"
            filterable
            clearable
            @change="handleFilterDiseaseIdsChange"
            class="select-class"
          >
            <el-option
              v-for="dict in sysManageDiseases"
              :key="dict.diseaseClassifyId"
              :label="dict.diseaseClassifyName"
              :value="dict.diseaseClassifyId"
            />
          </el-select>
        </div>
        <div style="margin-left:3px;">
          <div class="text">特征:</div>
          <el-select
            v-model="colorOption"
            size="mini"
            filterable
            clearable
            @change="handleChange"
            class="select-class"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div :style="{ backgroundColor: backColor }" class="color-box"></div>
      </div>
    </div>
    <div class="text-container">
      <el-button
        size="mini"
        type="primary"
        @click="handleAdd"
        v-hasPermi="['tagManage:tagSetting:add']"
        >新增标注设置</el-button
      >
    </div>
    <!-- <div class="status">
      当前状态：{{ this.currentStatus }}
    </div> -->

    <el-dialog
      title="画布设置"
      :close-on-click-modal="false"
      :visible.sync="configDialogVisiable"
      width="400px"
      :show-close="false"
      :append-to-body="true"
    >
      <el-form
        label-position="left"
        label-width="100px"
        size="mini"
        :model="config"
      >
        <el-form-item label="线框颜色：">
          <el-color-picker
            v-model="config.path_strokeStyle"
            size="mini"
          ></el-color-picker>
        </el-form-item>
        <el-form-item label="控制圈颜色：">
          <el-color-picker
            v-model="config.point_strokeStyle"
            size="mini"
          ></el-color-picker>
        </el-form-item>
        <el-form-item label="线框宽度：">
          <el-input-number
            size="mini"
            v-model="config.path_lineWidth"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="控制圈宽度：">
          <el-input-number
            size="mini"
            v-model="config.point_lineWidth"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="控制圈半径：">
          <el-input-number
            size="mini"
            v-model="config.point_radis"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="背景格：">
          <el-switch
            v-model="config.grid"
            active-color="#66a6ff"
            inactive-color="#999"
          ></el-switch>
        </el-form-item>
        <el-form-item label="导航线：">
          <el-switch
            v-model="config.guid"
            active-color="#66a6ff"
            inactive-color="#999"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="configDialogVisiable = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="configDialogVisiable = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 添加或修改对话框 -->
    <el-dialog
      title="新增标注设置"
      :visible.sync="markSetDialogShow"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
      v-dialogDrag
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-position="left"
        class="formBox1"
      >
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="标注设置名称" prop="markName">
              <el-input
                v-model="form.markName"
                placeholder="请输入标注设置名称"
                clearable
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="适用专病" prop="diseaseIds">
              <el-select
                v-model="form.diseaseIds"
                placeholder="适用专病"
                clearable
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="dict in sysManageDiseases"
                  :key="dict.diseaseClassifyId"
                  :label="dict.diseaseClassifyName"
                  :value="dict.diseaseClassifyId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-for="(dict, index) in colorArr" :key="index">
          <el-col :span="7">
            <el-form-item :label="'特征名称' + getIndex(index)">
              <el-input
                v-model="dict.featureName"
                placeholder="请输入特征名称"
                clearable
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <div style="height: 5px"></div>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'标注颜色选择'">
              <el-color-picker
                v-model="dict.colour"
                @change="changeColorValue(index)"
              ></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-input
              v-model="dict.colour"
              placeholder="颜色值"
              :disabled="true"
              style="width: 100%"
            />
          </el-col>
          <el-col
            :span="6"
            v-if="
              colorArr.length == getIndex(index) &&
              (dict.id == '' || dict.id == undefined || dict.id == null)
            "
          >
            <el-button @click="delcolorArr(index)" style="margin-left: 10px"
              >删除</el-button
            >
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="addcolorArr"
              >添加</el-button
            >
          </el-col>
          <el-col
            :span="2"
            v-if="
              colorArr.length != getIndex(index) &&
              (dict.id == '' || dict.id == undefined || dict.id == null)
            "
          >
            <el-button @click="delcolorArr(index)" style="margin-left: 10px"
              >删除</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitForm">提 交</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMarkIntall, addMarkIntall } from "@/api/system/tagManage";
import { listClassify,MarklistClassify } from "@/api/system/classify";
export default {
  name: "topbar",
  props: {
    currentStatus: String,
    currentTool: String,
  },
  data() {
    return {
      configDialogVisiable: false,
      contrast: 50, // 对比度
      brightness: 50, // 亮度
      // 绘图参数
      config: {
        path_lineWidth: 1,
        path_strokeStyle: "#f00",
        point_lineWidth: 1,
        point_strokeStyle: "#999",
        point_radis: 5,
        grid: false,
        guid: true,
      },
      currentTopBarName: "",
      backColor: "",
      colorOption: "",
      options: [],
      sysManageDiseases: [], //专病管理
      filterDiseaseIds: "",
      colorArr: [
        {
          featureName: "",
          colour: "",
        },
      ],
      markSetDialogShow: false,
      // 表单参数
      form: {
        markName: "", //设置名称
        diseaseIds: "", //专病类型
        list: [
          //特征名称、颜色集合
          {
            featureName: "",
            colour: "",
          },
        ],
      },
      // 表单校验
      rules: {
        markName: [
          {
            required: true,
            message: "标注设置名称不能为空",
            trigger: "blur",
          },
        ],
        diseaseIds: [
          {
            required: true,
            message: "专病必选",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    config: {
      handler() {
        this.$emit("configChange", this.config);
      },
      immediate: true,
      deep: true,
    },
    contrast: {
      handler() {
        this.$emit("contrastChange", Math.floor(this.contrast - 50));
      },
      immediate: true,
    },
    brightness: {
      handler() {
        this.$emit("brightnessChange", Math.floor(this.brightness - 50));
      },
      immediate: true,
    },
    //两个组件里的按钮点击 显示点击状态
    currentTool: function (newValue, oldValue) {
      if (
        ![
          "zoomIn",
          "zoomOut",
          "rotateRight",
          "rotateLeft",
          "move",
          "fullScreen",
          "clearAll",
          "setting",
        ].includes(newValue)
      ) {
        this.currentTopBarName = "";
      }
    },
  },
  created() {
    this.getclassList();
  },
  mounted() {},
  methods: {
    /** 提交按钮 */
    submitForm: function () {
      let paramsArr = [];
      console.log(this.$refs["form"]);
      this.$refs["form"].validate((valid) => {
        let that = this;
        if (valid) {
          console.log(this.form);
          console.log(that.colorArr);
          try {
            that.colorArr.forEach(function (ele) {
              if (
                ele.featureName == null ||
                ele.featureName == undefined ||
                ele.featureName == ""
              ) {
                throw new Error("请输入特征名称");
              }
              if (
                ele.colour == null ||
                ele.colour == undefined ||
                ele.colour == ""
              ) {
                throw new Error("请选择颜色值");
              }
              ele.markName = that.form.markName;
              ele.diseaseIds = that.form.diseaseIds;
              // ele.diseaseIds = that.form.diseaseIds.join(",");

              paramsArr.push(ele);
            });
          } catch (e) {
            this.$message.warning(e.message);
            return;
          }
          let params = paramsArr;
          console.log(paramsArr);
          addMarkIntall(params).then((response) => {
            if (response.code == 200) {
              this.$modal.msgSuccess("新增成功");
              this.markSetDialogShow = false;
              this.getclassList(this.filterDiseaseIds)
              //在topBar组件新增了标注病种，标注列表组件也有用到所以需要同步更新
              this.$emit("emitPhotoMarkMainMarkOptions");
            }
          });
        }
      });
    },
    getIndex(index) {
      return index + 1;
    },
    addcolorArr() {
      let obj = {
        featureName: "",
        colour: "",
      };
      this.colorArr.push(obj);
    },
    delcolorArr(index) {
      if (this.colorArr.length == 1) {
        this.$message.warning("至少保留一个值");
        return;
      }
      this.colorArr.splice(index, 1);
      console.log(this.colorArr);
    },
    changeColorValue(e) {
      console.log(e);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.form = {
        markName: "", //设置名称
        diseaseIds: this.filterDiseaseIds?this.filterDiseaseIds:'', //专病类型
      };
      this.colorArr = [
        {
          featureName: "",
          colour: "",
        },
      ];
      this.markSetDialogShow = true;
    },
    // 获取专病列表
    getclassList(id) {
      this.loading = true;
      let params = {
        pageNum: 1,
        pageSize: 9999,
        status: "0",
      };
      MarklistClassify(params).then((response) => {
        this.loading = false;
        this.sysManageDiseases = response.data;
        if(id){
          this.handleFilterDiseaseIdsChange(id)
        }
      });
    },

    //子组件点击topbar按钮背景颜色跟着改变   父组件监听滚轮放大缩小后执行了函数后子组件按钮背景色也要跟着变
    changeTopBarBtnBgcolor(eventName) {
      this.currentTopBarName = eventName;
    },
    changeEvent(eventName) {
      this.currentTopBarName = eventName;
      this.$emit("topBarEvent", eventName);
    },
    formatTooltip(val) {
      return parseInt(val - 50);
    },
    setting() {
      this.configDialogVisiable = true;
      this.currentTopBarName = "setting";
    },
    handleChange(data) {
      if (!!data) {
        this.options.forEach((item) => {
          if (item.id === data) {
            this.backColor = item.colour;
            this.config.path_strokeStyle = item.colour;
            this.$emit("setMarkId", data);
          }
        });
      } else {
        this.backColor = "#000";
        this.$emit("setMarkId", "");
      }
    },
    handleFilterDiseaseIdsChange(Mdata) {
      listMarkIntall({ pageNum: 1, pageSize: 9999, diseaseIds: Mdata }).then(
        (response) => {
          this.options = response.rows.map((item) => {
            return {
              ...item,
              label: item.featureName,
            };
          });
          this.colorOption = "";
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.activeClass {
  border-radius: 3px;
  color: #fff;
  background-color: #1890ff;
}

.annation-color {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.select-class {
  max-width: 100px;
}
.color-box {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid #999;
  background-color: transparent;
  margin-left: 10px;
}

.defaultClass {
}

.bar {
  //height: 30px;
  margin: 5px 0px;
}

.icon {
  height: 30px;
  width: 30px;
}

[class*=" el-icon-"],
[class^="el-icon-"] {
  box-sizing: border-box;
  height: 30px;
  width: 30px;
  line-height: 30px;
  font-size: 20px;
  padding: 0 5px;
  cursor: pointer;

  &:nth-child(1) {
    margin-left: 5px;
  }

  &:hover {
    border-radius: 3px;
    color: #fff;
    background-color: #1890ff;
  }
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 2px;
}

.status {
  float: right;
  margin-top: 8px;
  width: 160px;
  font-size: 14px;
}
</style>

<style scoped>
.text-container {
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  margin-bottom: 10px;
  vertical-align: middle;
  padding: 0 4px;
}

.text-container .text {
  display: inline-block;
  margin-right: 8px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
}

>>> .el-slider {
  height: 22px;
  display: inline-block;
  width: 60px;
}

>>> .el-slider__runway {
  margin: 15px 0;
  background-color: #000;
}

>>> .el-slider__bar {
  background-color: #e4e7ed;
}

>>> .el-slider__button {
  width: 12px;
  height: 12px;
  border: 1px solid #000;
}
</style>
